<template>
    <div class="box_first">
        <div class="login_box">
            <div class="login_title">登录系统</div>
            <el-input
                class="input_box"
                v-model="ruleForm.username"
                placeholder="请输入用户账号"
                @keyup.enter="submitForm"
            ></el-input>
            <el-input
                class="input_box"
                v-model="ruleForm.password"
                type="password"
                placeholder="请输入账号密码"
                @keyup.enter="submitForm"
            ></el-input>
            <!-- <div style="display: flex;justify-content: flex-end;">
				<el-checkbox v-model="remenber">记住我</el-checkbox>
			</div> -->

            <el-button class="btn" type="primary" @click="submitForm"
                >登录</el-button
            >
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, h } from "vue";
import { ElMessage } from "element-plus";
import { post } from "../../api/request";
import { useRouter } from "vue-router";
const router = useRouter();
let { ruleForm } = toRefs(
    reactive({
        //双向绑定表单
        ruleForm: {
            username: "",
            password: "",
        },
    })
);

let ruleFormRef = ref();
const submitForm = () => {
    if (!ruleForm.value.username || !ruleForm.value.password) {
        ElMessage.error("请输入用户名或密码");
        return;
    }
    ElMessage.success("登录成功！");
    setTimeout(() => {
        router.push({ path: "/" });
    }, 1000);
    
    // post({
    //     url: "wwwwwww",
    //     data: {
    //         username: ruleForm.value.username,
    //         password: ruleForm.value.password,
    //     },
    // }).then((res: any) => {
    //     console.log(res.code);
    // });
};
</script>


<style lang="scss" scoped>
.box_first {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/img/login_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .login_box {
        width: fit-content;
        background-color: #fff;
        padding: 30px;
        position: fixed;
        bottom: 32vh;
        right: 17vw;
        display: flex;
        flex-direction: column;

        .input_box {
            width: 15vw;
            margin: 1.4vh;
        }

        .btn {
            margin-top: 4vh;
        }

        .login_title {
            font-size: 0.22rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 3vh;
        }
    }
}

:deep(.el-checkbox__label) {
    color: #c0c0c0;
}

:deep(.el-input__inner) {
    color: #333 !important;
}
</style>
